<template>
    <div class="community-container">
      <!-- 顶部内容 -->
      <div class="header">
        <h1>热门话题</h1>
        <p>最新最热的话题讨论，参与社区互动</p>
      </div>
  
      <!-- 主内容区域 -->
      <div class="content-area">
        <el-row :gutter="20">
          <el-col :span="18">
            <el-card v-for="item in topics" :key="item.id" class="topic-card">
              <template #header>
                <div class="topic-header">
                  <span class="topic-tag">{{ item.category }}</span>
                  <h3>{{ item.title }}</h3>
                </div>
              </template>
              <div class="topic-content">
                <p>{{ item.content }}</p>
                <div class="topic-meta">
                  <span>作者：{{ item.author }}</span>
                  <span>回复：{{ item.replies }}</span>
                  <span>浏览：{{ item.views }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
          
          <!-- 侧边栏 -->
          <el-col :span="6">
            <div class="sidebar">
              <el-card>
                <h3>最新话题</h3>
                <ul>
                  <li v-for="item in newTopics" :key="item.id">
                    <router-link :to="`/community/topics/${item.id}`">{{ item.title }}</router-link>
                  </li>
                </ul>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
  
      <!-- 底部导航栏
      <el-menu
        :default-active="$route.path"
        mode="horizontal"
        class="bottom-nav"
        @select="handleNavSelect"
      >
        <el-menu-item index="/">
          <i class="iconfont icon-shop"></i>
          <span>商城</span>
        </el-menu-item>
        <el-menu-item index="/edu">
          <i class="iconfont icon-edu"></i>
          <span>农教</span>
        </el-menu-item>
        <el-menu-item index="/community">
          <i class="iconfont icon-community"></i>
          <span>社区</span>
        </el-menu-item>
      </el-menu> -->
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  
  const topics = ref([
    {
      id: 1,
      title: '如何种植有机蔬菜？',
      content: '新手想尝试有机种植，求大神指导...',
      category: '种植技术',
      author: '农夫小明',
      replies: 24,
      views: 1560
    },
    {
      id: 2,
      title: '阳台种菜常见问题解答',
      content: '哪些蔬菜适合阳台种植？浇水技巧有哪些？',
      category: '种植指南',
      author: '园艺专家',
      replies: 38,
      views: 2345
    }
  ])
  
  const newTopics = ref([
    { id: 3, title: '夏季番茄高产技巧' },
    { id: 4, title: '多肉植物度夏指南' }
  ])
  </script>
  
  <style scoped>
  .topic-card {
    margin-bottom: 20px;
    border: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }
  
  .topic-header {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .topic-tag {
    background: #409EFF;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
  }
  
  .topic-meta {
    margin-top: 10px;
    color: #909399;
    font-size: 12px;
  }
  
  .sidebar {
    padding: 15px;
  }
  
  @media (max-width: 768px) {
    .content-area {
      padding: 10px;
    }
    
    .el-row {
      flex-direction: column;
    }
    
    .el-col-6 {
      margin-top: 20px;
    }
  }
  </style>